<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title><%= title%></title>
  <link rel="SHORTCUT ICON" href="/img/html_head.png">
  <link rel="stylesheet" type="text/css" href="/css/home-blog.css">
  <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
  <!--加载meta IE兼容文件-->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->
</head>
<body>

  <!--  页头  -->
  <%- include('../home/header.html') -%>

  <div class="album-content w1000"  id="layer-photos-demo" class="layer-photos-demo">
    <!--封面相册-->
    <div class="img-info" style="overflow: hidden;">
      <img src="/img/xc_img1.jpg" alt="">
      <div class="title" style="float: left">
        <p class="data">
          <span>今日上传</span>
          <time>2018/10/10</time>
        </p>
        <p class="text">观赏最美的土耳其的日</p>
        <p class="operation">
          <a href="/home/upload-album.html" class="btn btn-small">上传相册</a>
        </p>
      </div>
    </div>
    <!--相册列表-->
    <div class="img-list">
      <div class="layui-fluid" style="padding:0">
        <div class="layui-row layui-col-space30 space">
          <!---
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
              <div class="item">
                <img src="/img/xc_img3.jpg">
                <div class="cont-text">
                  <div class="data">2018/08/08</div>
                  <p class="address"><i class="layui-icon layui-icon-location"></i><span>江西九江</span></p>
                  <p class="briefly">今日天气晴朗,庐山一日游</p>
                </div>
              </div>
            </div>
          -->
          <% if(albumList.length > 0) { %>
            <% albumList.forEach(item => { %>
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                <div class="item" id="<%= item.id %>">
                  <img src="<%= item.album_list %>">
                  <div class="cont-text">
                    <div class="data"><%= item.create_time %></div>
                    <p class="address">
                      <i class="layui-icon layui-icon-location"></i>
                      <span><%= item.album_address %></span>
                    </p>
                    <p class="briefly">
                      <span><%= item.album_title %></span>
                      <a class="btn btn-edit" href="/home/edit-album.html/<%= item.id %>">编辑相册</a>
                      <a class="btn btn-view" href="/home/view-album.html/<%= item.id %>">查看相册</a>
                    </p>
                  </div>
                </div>
              </div>
            <% })%>
            <% } else { %>
               <div class="page-no-data">页面内容为空</div>
            <% } %>
          </div>
        </div>
      </div>
      <!--分页-->
      <div id="demo"></div>
    </div>
  </div>
  <!-- 页脚-->
  <%- include('../home/footer.html'); -%>

  <script type="text/javascript" src="/layui/layui.js"></script>
  <script type="text/javascript">
   layui.config({
      base: '/js/util/'
    }).use(['element','laypage','form','layer','menu'],function(){
      element = layui.element,laypage = layui.laypage,form = layui.form,layer = layui.layer,menu = layui.menu;
      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      layer.photos({
        photos: '#layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        ,tab:function(pic,layero){
          console.log(pic,layero)
        }
      });
      menu.init();
    })
  </script>
</body>
</html>
